<!--选择界面-->
<style lang="less" scoped>
    .chose{
        background: url(img/background.png) no-repeat;
        height: calc(~"100vh - 60px");
        background-size: cover;
    }
    .choseImg{
        width: 455px;
        height: 219px;
    }
    .imgBox{
        position: relative;
        height: 100%;
    }
    .chose_title{
        font-size: 28px;
        color: #1f89e0;
        margin-left: 15px;
    }
    .choseBox{
        position: absolute;
        top: 25%;
        left: 30%;
        cursor: pointer;
    }
</style>

<template>
    <div class="chose">
        <i-col span="12" class="imgBox">
            <div class="choseBox" @click="clickFn('work')">
                <img src="./img/chref.png" v-if="show" class="choseImg" alt="">
                <img src="./img/chref_select.png" v-else class="choseImg" alt="">
                <div style="text-align: center">
                    <img src="./img/icon.png" height="41" width="41" alt=""><span class="chose_title">河长界面</span>
                </div>
            </div>
        </i-col>
        <i-col span="12" class="imgBox">
            <div class="choseBox" @click="clickFn('work1')">
                <img src="./img/deps.png" v-if="show1" class="choseImg1" alt="">
                <img src="./img/dep_select.png" v-else class="choseImg1" alt="">
                <div style="text-align: center">
                    <img src="./img/icon.png" height="41" width="41" alt=""><span class="chose_title">河长办界面</span>
                </div>
            </div>
        </i-col>
    </div>
    
</template>
    
<script>
    export default {
        data () {
            return {
                show: true,
                show1: true
            }
        },
        methods: {
            clickFn (name) {
                this.$router.push('/home/' + name)
            }
        },
        mounted: function () {
            $('.choseImg').mouseenter(() => {
                this.show = false
            })
            $('.choseImg').mouseleave(() => {
                this.show = true
            })
            $('.choseImg1').mouseenter(() => {
                this.show1 = false
            })
            $('.choseImg1').mouseleave(() => {
                this.show1 = true
            })
        }
    }
</script>
